<template>
  <div>
    <div class="app-top-action">
      <div class="appTitle">HLOL</div>
      <div>
        <!-- 最小化按钮 -->
        <a-tooltip placement="bottomLeft">
        <template slot="title">
          <span>最小化</span>
        </template>
        <button class="btn-minimize" @click="minimizeWin"></button>
        </a-tooltip>
        <!-- 关闭按钮 -->
        <a-tooltip placement="bottom">
        <template slot="title">
          <span>关闭</span>
        </template>
        <button class="btn-close" @click="closeWin"></button>
        </a-tooltip>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
// const electron = window.electron
// const ipc = window.electron.ipcRenderer

export default {
  methods: {
    minimizeWin(){
      //  ipc.send('window-min') // 通知主进程我要进行窗口最小化操作
    },
    maximizeWin(){
      // ipc.send('window-max')
    },
    closeWin(){
      this.$confirm({
        title: '提示',
        centered: true,
        content: '是否确认退出HLOL?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
          // ipc.send('window-close')
        },
        onCancel() {
          //nothing
        },
      });
      
    },
  }
};
</script>

<style>
.app-top-action {
  background-color: #ffffff;
  height: 32px;
  width: 100%;
  -webkit-app-region: drag;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-top-action button {
  background-color: transparent;
  -webkit-app-region: no-drag;
  margin: 0 15px 0 5px;
  outline: none;
  /* height: 70%; */
}

.appTitle {
  margin: 0 0 0 15px;
  font-size: 20px;
  color: rgb(175, 124, 30);
}

.btn-close {
  background-color: rgb(161, 45, 29) !important;
  border: 0px;
  color: rgb(161, 45, 29);
  border-radius: 50%;
  height: 15px;
  width: 15px;
}

.btn-close:hover {
  background-color: rgb(141, 6, 6) !important;
}

.btn-minimize {
  background-color: rgb(19, 151, 19) !important;
  border: 0px;
  color: rgb(19, 151, 19);
  border-radius: 50%;
  height: 15px;
  width: 15px;
}

.btn-minimize:hover {
  background-color: rgb(15, 110, 15) !important;
}

.btn-minimize:active {
  border: 0px;
  background-color: green;
}
</style>